<template>
  <div class="cabinet-add-module">
    <el-card>
      <!-- 添加功能表格 -->
      <el-table :data="addTableData" border style="margin-bottom: 20px; width: 100%;"
        :row-class-name="addTableRowClass">
        <el-table-column prop="label" label="功能" width="120" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <template v-if="scope.row.key === 'area'">
              <el-input v-model="areaForm.area" placeholder="请输入区域编号" style="width: 220px; margin-right: 16px;" />
              <el-button type="primary" @click="handleAddArea">添加区域</el-button>
            </template>
            <template v-else-if="scope.row.key === 'row'">
              <el-select v-model="areaForm.selectedArea" placeholder="请选择区域" style="width: 140px; margin-right: 16px;">
                <el-option v-for="area in areas" :key="area" :label="area" :value="area" />
              </el-select>
              <el-input v-model="areaForm.row" placeholder="请输入排号" style="width: 140px; margin-right: 16px;" />
              <el-button type="primary" @click="handleAddRow">添加排</el-button>
            </template>
            <template v-else-if="scope.row.key === 'cabinet'">
              <el-select v-model="cabinetForm.area" placeholder="请选择区域" style="width: 140px; margin-right: 16px;">
                <el-option v-for="area in areas" :key="area" :label="area" :value="area" />
              </el-select>
              <el-select v-model="cabinetForm.row" placeholder="请选择排" style="width: 140px; margin-right: 16px;">
                <el-option v-for="row in rows[cabinetForm.area]" :key="row" :label="row" :value="row" />
              </el-select>
              <el-input-number v-model="cabinetForm.number" :min="1" :max="999" placeholder="柜号" style="width: 120px; margin-right: 16px;" />
              <el-button type="primary" @click="handleAddCabinet">添加柜子</el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
  name: "AddCabinetModule",
  data() {
    return {
      areaForm: {
        area: "",
        selectedArea: "",
        row: ""
      },
      cabinetForm: {
        area: "",
        row: "",
        number: 1
      },
      addTableData: [
        { key: 'area', label: '添加区域' },
        { key: 'row', label: '添加排' },
        { key: 'cabinet', label: '添加柜子' }
      ]
    };
  },
  computed: {
    ...mapState({
      areas: (state) => state.cabinets.areas,
      rows: (state) => state.cabinets.rows
    }),
    ...mapGetters(["getCabinetsByArea", "getAllCabinets"])
  },
   watch: {
    // This watch was added previously and is helpful for clearing the row select when area changes.
    // Keeping it as it aligns with the original select logic.
    'cabinetForm.area': function(newArea, oldArea) {
      if (newArea !== oldArea) {
        this.cabinetForm.row = '';
      }
    }
  },
  methods: {
    addTableRowClass() {
      return 'add-table-row-bg';
    },
    async handleAddArea() {
      if (!this.areaForm.area) {
        this.$message.warning("请输入区域编号");
        return;
      }
      try {
        await this.$store.dispatch("addArea", this.areaForm.area);
        this.$message.success("添加区域成功");
        this.areaForm.area = "";
      } catch (error) {
        this.$message.error(error.message || "添加区域失败");
      }
    },
    async handleAddRow() {
      if (!this.areaForm.selectedArea || !this.areaForm.row) {
        this.$message.warning("请选择区域并输入排号");
        return;
      }
      try {
        await this.$store.dispatch("addRow", {
          area: this.areaForm.selectedArea,
          row: this.areaForm.row
        });
        this.$message.success("添加排成功");
        this.areaForm.row = "";
      } catch (error) {
        this.$message.error(error.message || "添加排失败");
      }
    },
    async handleAddCabinet() {
      if (!this.cabinetForm.area || !this.cabinetForm.row || !this.cabinetForm.number) {
        this.$message.warning("请填写完整的柜子信息");
        return;
      }
      try {
        await this.$store.dispatch("addCabinet", {
          area: this.cabinetForm.area,
          row: this.cabinetForm.row,
          number: this.cabinetForm.number
        });
        this.$message.success("添加柜子成功");
        this.cabinetForm.number = 1;
         // Optional: Reset area and row selects after successful addition
        // this.cabinetForm.area = '';
        // this.cabinetForm.row = '';
      } catch (error) {
        this.$message.error(error.message || "添加柜子失败");
      }
    }
  }
};
</script>

<style scoped>
.cabinet-add-module {
  padding: 20px;
}
/* Restore table-specific styles */
::v-deep .add-table-row-bg td {
  background-color: #f4f6fa !important;
}
::v-deep .el-table__header th {
  background-color: #f4f6fa !important;
}

/* Remove grid specific styles */
/*
.add-cabinet-form {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 20px;
  align-items: center;
}

.add-cabinet-form .el-form-item {
  margin-bottom: 0;
}

.add-cabinet-form .el-form-item .el-form-item__content {
  width: 100%;
}

.add-cabinet-form .el-form-item:nth-child(4) {
    grid-column: 3 / span 2;
}
*/
</style> 